<ion-header class="bp-header">
  <ion-navbar>
    <ion-title>
      <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
        {{ 'Cards' | translate }}
      </div>
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content #scrollArea>
  <ion-refresher (ionRefresh)="refresh($event)" pullMin="90" pullMax="160">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <div class="wrapper">
    <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
      <ion-toolbar class="wide-header__title" (click)="enableCard()" tappable>
        <expandable-header-primary>
          {{ 'Cards' | translate }}
        </expandable-header-primary>
      </ion-toolbar>
    </expandable-header>

    <ng-container *ngIf="tabReady">
      <ng-container *ngIf="showBitPayCard">
        <bitpay-card-home [cardExperimentEnabled]="cardExperimentEnabled" [bitpayCardItems]="bitpayCardItems"
                          [hasCards]="hasCards" [network]="NETWORK" [waitList]="waitList" [initialized]="initialized"
                          [showBitpayCardGetStarted]="showBitpayCardGetStarted"></bitpay-card-home>
      </ng-container>

      <gift-cards *ngIf="showGiftCards && activeCards" [scrollArea]="scrollArea" [activeCards]="activeCards"></gift-cards>


      <p class="card-terms" *ngIf="showBitPayCard && showDisclaimer && initialized && !waitList" @fade>
        *Network fees and miner fees may apply.<br><br>
        BY USING THIS CARD YOU AGREE WITH THE TERMS AND CONDITIONS OF THE CARDHOLDER AGREEMENT AND FEE
        SCHEDULE, IF ANY. This card is issued by Metropolitan Commercial Bank (Member FDIC) pursuant to a license from
        Mastercard International. "Metropolitan Commercial Bank" and "Metropolitan" are registered trademarks of
        Metropolitan Commercial Bank ©2014.<br><br>
        Mastercard is a registered trademark and the circles design is a trademark of Mastercard International
        Incorporated.
      </p>
    </ng-container>

  </div>
</ion-content>
